<template>
  <div class="goodsinfo-container">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballflag" ref="ball"></div>
    </transition>
    <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imgList="lunbotu" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：
            <span class="now-price">￥{{goodsinfo.sell_price}}</span>
          </p>
          <p>
            购买数量：
            <numbox @getcount="getSelectCount" :max="goodsinfo.stock_quantity"></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addshop">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{goodsinfo.goods_no}}</p>
          <p>库存情况：{{goodsinfo.stock_quantity}}</p>
          <p>上架时间：{{goodsinfo.add_time|dateFormat("YYYY-MM-DD")}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goodsDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goodsComment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from "../subcomponents/swiper.vue";
import numbox from "../subcomponents/goodsinfo_numbox.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      lunbotu: [],
      goodsinfo: {},
      ballflag:false,
      selectCount:1
    };
  },
  created() {
    this.getLunbotu();
    this.getGoodsInfo();
  },
  methods: {
    getLunbotu() {
      //   this.$http.get("api/getthumimages/"+this.id).then(result=>{
      //       if(result.body.status===0){
      //           this.lunbotu=result.body.message
      //       }
      //   })
      this.lunbotu = [
        {
          src:
            "https://img.alicdn.com/bao/uploaded/i5/TB1drQTq.Y1gK0jSZFCtHgwqXXa_033840.jpg"
        },
        {
          src:
            "https://img.alicdn.com/bao/uploaded/i6/TB1I0tWlCzqK1RjSZFpx_mkSXXa_103843.jpg"
        },
        {
          src:
            "https://img.alicdn.com/bao/uploaded/i1/2765414748/O1CN01BNwOos1kwd2VDr9GF_!!2765414748.jpg"
        }
      ];
      this.lunbotu.forEach(item => {
        item.url = item.src;
      });
    },
    getGoodsInfo() {
      //   this.$http.get("api/goods/gteinfo"+this.id).then(result=>{
      //       if(result.body.status===0){
      //           this.goodsinfo=result.body.message
      //       }
      //   })
      this.goodsinfo = {
        id: this.id,
        title: "iphone 8s",
        add_time: Date.now(),
        goods_no: "sd3909090",
        stock_quantity: 60,
        market_price: 269,
        sell_price: 199
      };
    },
    goodsDesc(id) {
      this.$router.push({ name: "goodsdesc", params: { id } });
    },
    goodsComment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },
    addshop(){
      this.ballflag=!this.ballflag;
      var goodsinfo={
        id:this.id,
        count:this.selectCount,
        price:this.goodsinfo.sell_price,
        selected:true
      }
      this.$store.commit("addCar",goodsinfo)
    },
     beforeEnter(el){
       el.style.transform="translate(0,0)";
     },
     enter(el,done){
       el.offsetWidth;
       const ballpos=this.$refs.ball.getBoundingClientRect();
       const badgepos=document.getElementById("badge").getBoundingClientRect();
       const xDist=badgepos.left-ballpos.left;
       const yDist=badgepos.top-ballpos.top;
       el.style.transform=`translate(${xDist}px,${yDist}px)`;
       el.style.transition="all 1s cubic-bezier(.17,-0.48,.58,.09)";
       done();
     },
     afterEnter(el){
      this.ballflag=!this.ballflag;
     },
     getSelectCount(count){
       this.selectCount=count;
     }
    
  },
  components: {
    swiper,
    numbox
  }
};
</script>
<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .now-price {
    color: red;
    font-size: 16px;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
}

.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 99;
  top: 391px;
  left: 152px;
}
</style>